<template>
    <div style="display: flex;">
        <div style="margin-left:0.2rem;color: silver;">
            <!-- <div v-if="data >=1000000 && data < 10000000">
                {{ String(data).slice(0,3)}}万
            </div>
            <div v-else-if="data >=100000 && data < 1000000">
                {{ String(data).slice(0,2)}}万
            </div>
            <div v-else-if="data >=10000 && data < 100000">
                {{ String(data).slice(0,1)}}万
            </div> -->
            <div v-if="data ==null || data ==''" style="color: #000;">
                -
            </div>
            <div v-else style="color: #000;">{{ parseInt(data) }}</div>
        </div>
        <div v-if="rate == null || rate == '' || rate == undefined"></div>
        <div v-else>
            <div style="display: flex;text-align: center;width: 100%;" v-if="rate >0 && rate.toFixed(1)!==0.0">
                <img style="width: 0.6rem;margin-left: 0.5rem;" src="../assets/img/icon/arrowup1.svg"/> 
                <div class="rate-style" style="color:#F53F3F">{{ rate.toFixed(1) }}%</div>
            </div>
            <div style="display: flex;margin-left:0.65rem;" v-else-if="rate <0">
                <div v-if="rate.toFixed(1)==0.0" class="rate-style">
                    {{Math.abs(rate).toFixed(1)}}%
                </div>
                <div v-else style="display: flex;">
                    <img style="width: 0.6rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/> 
                    <div class="rate-style" style="color:#58A55C">{{Math.abs(rate).toFixed(1)}}%</div>
                </div>
            </div>
            <div style="display: flex;margin-left:0.65rem;color: silver;" v-else-if="rate == 0 || rate == '' || rate == null ||rate.toFixed(1)==0.0">
                <div class="rate-style">{{rate}}%</div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
props:{
    data: {
      type: Number,
      required: true
    },
    rate: {
      type: Number,
      required: true
    }
}
}
</script>

<style lang="scss" scoped>
.rate-style{
    text-align: center;
    width: 100%;
    margin-left: 0.2rem;
    font-size: 0.775rem;
    color: rgb(134,144,156);
}
</style>